import Table from "@/components/Table/Table";
import React, { useMemo } from "react";
import cls from "@/styles/pages/users/Users.module.scss";
import { UserI } from "@/models/user";
import { Avatar } from "@/components/Avatar/Avatar";
import { useGroup } from "@/api/group";
import { useNavigate } from "react-router-dom";
import { PaginationI } from "@/models/common";

type Props = {
  users: UserI[];
  isLoading: boolean;
  pagination: PaginationI;
};
export const UsersTable = ({ users, isLoading, pagination }: Props) => {
  const [groupsPag, groups, groupsIsLoading] = useGroup();
  const navigate = useNavigate();

  const columns = useMemo(() => {
    return [
      {
        name: "Сотрудник",
        key: "user",
        cell: (data: UserI) => {
          return (
            <div className={cls.user}>
              <div className={cls.avatar}>
                <Avatar src={data.image} />
              </div>
              <div className={cls.user_desc}>
                <div className={cls.name}>
                  {`${data.first_name} ${data.last_name}`}
                </div>
                <div className={cls.pos}>{data.position}</div>
              </div>
            </div>
          );
        },
        width: 30,
      },
      {
        name: "Основная модальность",
        key: "create_date",
        cell: (data: UserI) => {
          return data.main_specialization?.specialization;
        },
        width: 20,
      },
      {
        name: "Дополнительные модальности",
        key: "position",
        cell: (data: UserI) => {
          return data.additional_specializations
            ?.map((s) => s.specialization)
            .join(", ");
        },
        width: 20,
      },
      {
        name: "Отдел",
        key: "group",
        cell: (data: UserI) => {
          return groups?.find((g) => g.id === data.groups[0])?.name;
        },
        width: 30,
      },
    ];
  }, [users]);
  return (
    <div className={cls.table}>
      <Table
        // @ts-ignore
        data={users}
        // @ts-ignore
        columns={columns}
        isLoading={isLoading || groupsIsLoading}
        pagination={pagination}
        onRowClick={(item) => navigate(`/users/${item.id}`)}
      />
    </div>
  );
};
